<template>
    <div class="form-section">
        <div class="form-container">
            <a-form layout="vertical">
                <a-form-item label="索引名称" required :validate-status="indexNameValidateStatus" :help="indexNameHelp">
                    <a-input :value="indexForm.index_name" placeholder="请输入" style="width: 50%"
                        @update:value="(v) => setIndexField('index_name', String(v ?? '').trim())"
                        @blur="$emit('indexNameBlur')" />
                </a-form-item>

                <a-form-item label="索引类型" required>
                    <a-radio-group :value="indexForm.index_type"
                        :disabled="indexTypeLoading || indexTypeOptions.length === 0"
                        @update:value="(v) => setIndexField('index_type', String(v))">
                        <a-radio-button v-for="opt in indexTypeOptions" :key="opt.value" :value="opt.value">
                            {{ opt.label }}
                        </a-radio-button>
                    </a-radio-group>
                    <a-spin v-if="indexTypeLoading" size="small" style="margin-left: 8px" />
                </a-form-item>

                <a-form-item label="索引权限">
                    <a-select :value="indexForm.index_permission" style="width: 50%" placeholder="请选择"
                        @update:value="(v) => setIndexField('index_permission', String(v))">
                        <a-select-option value="public">公开</a-select-option>
                        <a-select-option value="private">私有</a-select-option>
                        <a-select-option value="group">部门可见</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="备注">
                    <div class="remark-wrap">
                        <a-textarea :value="remark" placeholder="输入" :maxlength="20" :showCount="false" :rows="5"
                            class="remark-textarea" allowClear style="width: 50%"
                            @update:value="(v) => setRemark(String(v ?? ''))" />
                        <span class="remark-count" style="width: 52%">{{ (remark || '').length }}/20</span>
                    </div>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup lang="ts">
type Option = { label: string; value: string };

defineProps<{
    indexForm: { index_name: string; index_type: string; index_owner_group: string; index_permission: string };
    remark: string;
    indexTypeOptions: Option[];
    indexTypeLoading: boolean;
    indexNameValidateStatus: any;
    indexNameHelp: string;
    setIndexField: (k: "index_name" | "index_type" | "index_owner_group" | "index_permission", v: any) => void;
    setRemark: (v: string) => void;
}>();

defineEmits<{ (e: "indexNameBlur"): void }>();
</script>

<style scoped lang="less">
.remark-wrap {
    position: relative;
    width: 100%;
}

.remark-count {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 12px;
    color: #bfbfbf;
    pointer-events: none;
}
</style>
